<template>
  <div class="right-sidebar">
    <div v-if="selectedComponent">
      <component :is="settingsComponent" :component="selectedComponent" />
    </div>
    <div v-else>
      <p>请在画布中选择一个组件以编辑其属性。</p>
    </div>
  </div>
</template>

<script>
import { EventBus } from '@/event-bus.js';
import TitleBarSettings from './settings/TitleBarSettings.vue';

export default {
  name: 'RightSidebar',
  components: {
    TitleBarSettings
  },
  data() {
    return {
      selectedComponent: null
    };
  },
  computed: {
    settingsComponent() {
      if (!this.selectedComponent) return null;
      switch (this.selectedComponent.type) {
        case 'title-bar':
          return 'TitleBarSettings';
        default:
          return null;
      }
    }
  },
  created() {
    EventBus.$on('component-selected', component => {
      this.selectedComponent = component;
    });
  },
  beforeDestroy() {
    EventBus.$off('component-selected');
  }
};
</script>

<style scoped>
.right-sidebar {
  width: 300px;
  border-left: 1px solid #ccc;
  padding: 10px;
}
</style>